<template>
	<u-popup :show="visible" @close="close" :closeable="true" round="10">
		<view class="login-panel">		
			<button class="login-btn" type="primary" open-type="getPhoneNumber"
				:disabled="loginBtnDisabled" @getphonenumber="getPhoneNumber">一键登录</button>
				
			<view class="agreement">
				<u-checkbox-group shape="circle" size="12" activeColor="#ccc" 
					v-model="agree" @change="agreeChange">
					<u-checkbox name="1"></u-checkbox>
				</u-checkbox-group>
				<view class="text">
					我已阅读并同意
					<view class="link">《用户协议》</view>
					<view class="link">《隐私政策》</view>
				</view>
			</view>	
			
			<view class="tips">
				为了给您提供更好的购物体验，请授权小程序获取您的手机号完成登录
			</view>
		</view>
	</u-popup>
</template>

<script>
import { wxAccessToken, wxPhoneLogin } from "@/api/app.js";
	
export default {
	props: {
	    visible: {
	      type: Boolean,
	      required: true
	    }
	},
	data() {
		return {
			show: false,
			loginBtnDisabled: false,
			agree: ['1']
		}
	},
	methods: {
		close() {
			this.$emit("close");
		},
		getPhoneNumber(event) {
			if(event.detail.errMsg !== 'getPhoneNumber:ok') {
				uni.showToast({
					icon: "none",
					title: '允许获取才能登录'
				});
				return;
			}
			
			uni.showLoading({
				title: '登录中...'
			});
			
			const self = this;
			wxAccessToken().then(res1=>{
				let accessToken = res1.data.accessToken;
				wxPhoneLogin(accessToken, event.detail.code).then(res2=>{
					console.log("=== token:" + res2.data.token);
					uni.hideLoading();
					
					uni.setStorage({
						key: 'token',
						data: res2.data.token,
						success: function(){
							self.$emit("completed");
						}	
					});
				});
				
			});
		},
		agreeChange(values) {
			console.log("====len:" + this.agree.length);
			console.log('change', values);
			if(values.length <= 0) {
				this.loginBtnDisabled = true;
				uni.showToast({
					icon: "none",
					title: '不同意条款将无法登录'
				});
			} else {
				this.loginBtnDisabled = false;
			}
			
		}	
	}
}	
</script>

<style lang="less">
.login-panel {
	height: 30vh;
	padding: 64rpx;
	
	.login-btn {
		background: #1aad19;
		height: 42px;
		font-size: 16px;
		margin: 25px 0;
	}
	
	.agreement {
		display: flex;
		flex-direction: row;
		font-size: 12px;
		color: #acacac;
		
		.text {
			display: flex;
			flex-direction: row;
			
			.link {
				color: #3284ca;
			}
		}
	}	
	
	.tips {
		margin-top: 10px;
		font-size: 12px;
		color: #acacac;
	}
}


</style>